<template>
  <border class="current-year-lease-trend"
          :moduleType="borderConfig.moduleType"
          :icon="borderConfig.icon"
          :titleText="borderConfig.titleText"
          :organType="borderConfig.organType"
          :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content"
         slot="module-content">
      <div class="module-content-l">
        <div class="u-message">
          <message v-for="(item, index) in messageLeft"
                   :key="index"
                   :messageName="item.messageName"
                   :messageNumber="item.messageNumber"
                   :messageUnit="item.messageUnit"></message>
        </div>
        <div class="u-title">本年平均单价(元/m²/月)</div>
        <div class="u-box">
          <div class="u-polygon">
            <img src="./../../assetsManagement/assets/images/polygon.png"
                 alt="">
            <div class="u-polygon-box">
              <div class="u-text">{{unitPrice}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="module-content-r">
        <div class="u-head">
          <div class="u-choose">
            <div class="u-btn"
                 v-for="(item, index) in moduleOption"
                 :key="index"
                 @click="changeChooseTab(item, index)">
              <chooseTab :chooseTabName="item.name"
                         :chooseTabClassName="moduleOptionCheckedId === item.id ? 'choosed' : ''"></chooseTab>
            </div>
          </div>
        </div>
        <div class="u-chart">
          <barLine ref="barLine"
                   :tooltip="moduleConfig.optionsConfig.tooltip"
                   :legend="moduleConfig.optionsConfig.legend"
                   :xAxis="moduleConfig.optionsConfig.xAxis"
                   :yAxis="moduleConfig.optionsConfig.yAxis"
                   :seriesData="moduleConfig.optionsConfig.series"
                   colorType="barPositive"></barLine>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../../components/Border.vue'
import Message from './../../assetsManagement/components/Message.vue'
import ChooseTab from './../../assetsManagement/components/ChooseTab.vue'
import barLine from './../../assetsManagement/components/BarLine.vue'
export default {
  name: 'rentalIncomeTrend',
  components: {
    Border,
    Message,
    ChooseTab,
    barLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '本年租赁趋势'
      },
      time: '',
      unitPrice: '',
      moduleOptionCheckedId: '',
      moduleOptionCheckedIndex: 0,
      moduleOption: [],
      moduleConfig: {
        optionsConfig: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['本年租金单价', '去年租金单价', '月均出租率']
          },
          xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          }],
          yAxis: [{
            name: '(元/m²/月)',
            type: 'value'
          }, {
            name: '(%)',
            type: 'value',
            splitLine: {
              show: false
            }
          }],
          series: []
        }
      },
      messageLeft: [{
        messageName: '累计应收租金收入(万元)',
        messageNumber: 0,
        messageUnit: ''
      },
      {
        messageName: '累计出租面积(万m²)',
        messageNumber: 0,
        messageUnit: ''
      }]
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  beforeDestroy () {
    clearInterval(this.time)
  },
  methods: {
    getData (rStr) {
      let self = this
      // let res = {
      //   data: {
      //     "code": "0",
      //     "msg": "查询成功!",
      //     "data":{
      //       "totalIncome":1000, // "价格",
      //       "totalRentedOutResource": 2000, // "面积",
      //       "unitPrice": 130, // 本年平均单价
      //       "resultList":[{
      //         "id":"",
      //         "name":"1月",
      //         "unitPrice1": 100, // "本月租金单价",
      //         "unitPrice2": 60, // "去年同月租金单价",
      //         "leaseRate": 0.88, // "出租率"
      //       }, {
      //         "id":"",
      //         "name":"2月",
      //         "unitPrice1": 10,
      //         "unitPrice2": 20,
      //         "leaseRate": 0.8,
      //       }]
      //     }
      //   }
      // }
      if (rStr !== 'change') {
        self.getTabData()
        self.setIntervalTab()
      }
      self.assetsManagementApi.leaseChangeByType({ organId: self.organId, typeId: self.moduleOptionCheckedId }).then(res => {
        if (res.data.code === '0') {
          let resData = res.data.data || {}
          self.messageLeft[0].messageNumber = resData.totalIncome
          self.messageLeft[1].messageNumber = resData.totalRentedOutResource
          self.unitPrice = resData.unitPrice
          let xAxis = []
          let unitPrice1 = []
          let unitPrice2 = []
          let leaseRate = []
          let resultList = resData.resultList || []
          let maxId = (resultList[resultList.length - 1] || {}).id || (new Date().getMonth() + 1)
          let maxMonth = new Date().getMonth() + 1
          maxId = maxId < maxMonth ? maxMonth : maxId
          for (let i = 0; i < maxId; i++) {
            xAxis.push((i + 1) + '月')
            unitPrice1.push('')
            unitPrice2.push('')
            leaseRate.push('')
          }
          resultList.forEach(v => {
            if (v.id) {
              // xAxis.push(v.name || '')
              unitPrice1[v.id - 1] = v.unitPrice1
              unitPrice2[v.id - 1] = v.unitPrice2
              leaseRate[v.id - 1] = v.leaseRate
            }
          })
          self.moduleConfig.optionsConfig.xAxis[0].data = xAxis
          self.moduleConfig.optionsConfig.series = []
          self.moduleConfig.optionsConfig.series = [{
            name: '本年租金单价',
            type: 'bar',
            data: unitPrice1
          }, {
            name: '去年租金单价',
            type: 'bar',
            data: unitPrice2
          }, {
            name: '月均出租率',
            type: 'line',
            yAxisIndex: 1,
            data: leaseRate
          }]
        } else {
          self.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        self.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    getTabData () { // 获取标签类型
      let self = this
      self.moduleOption = []
      self.moduleOption.push({ id: '', name: '全部'})
      self.assetsManagementApi.topRentedOutResource({ organId: self.organId}).then(res => {
        if (res.data.code === '0') {
          let resData = res.data.data || {}
          let resultList = resData.resultList || []
          let topLen = 0
          resultList.forEach(v => {
            if (v.id && topLen < 3) {
              topLen++
              self.moduleOption.push(v)
            }
          })
        } else {}
      }, res => {})
    },
    setIntervalTab () { // 自动切换标签
      let self = this
      clearInterval(self.time)
      self.time = setInterval(() => {
        let tabIndex = self.moduleOptionCheckedIndex + 1
        tabIndex = tabIndex > self.moduleOption.length - 1 ? 0 : tabIndex
        self.changeChooseTab(self.moduleOption[tabIndex], tabIndex)
      }, 30000)
    },
    changeChooseTab (rData, rIndex) { // 切换标签数据处理
      if (this.moduleOptionCheckedId !== rData.id) {
        this.moduleOptionCheckedId = rData.id
        this.moduleOptionCheckedIndex = rIndex
        this.getData('change')
      }
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
.current-year-lease-trend {
  .module-content {
    width: 100%;
    height: 100%;
    &:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      line-height: 0;
      font-size: 0;
    }

    .module-content-l {
      float: left;
      width: 39%;
      padding-left: 1%;
      overflow: hidden;
      height: 100%;
      > .u-message {
        float: left;
        width: 100%;

        .message {
          width: calc((100% - 20px) / 2);
          margin: 5px;
          float: left;
        }
      }
      > .u-title {
        float: left;
        width: 100%;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 20px;
        padding: 5px 0;
      }
      > .u-box {
        float: left;
        width: 100%;

        > .u-polygon {
          position: relative;
          margin: 0 auto;
          width: calc(100% - 100px);
          height: calc(100% - 100px);
          > img {
            height: calc(100% - 80px);
          }
          > .u-polygon-box {
            position: absolute;
            top: calc((100% - 20px) / 2);
            left: 0;
            width: 100%;
            > .u-text {
              color: #fff;
              font-size: 20px;
              font-weight: bold;
              line-height: 20px;
            }
          }
        }
      }
    }

    .module-content-r {
      float: left;
      width: 60%;
      height: 100%;

      > .u-head {
        float: left;
        width: 100%;
        .u-choose {
          float: right;
          margin-right: 15px;
          margin-bottom: 5px;
          .u-btn {
            float: left;
            width: 52px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }

      > .u-chart {
        float: left;
        width: 100%;
        height: calc(100% - 40px);
      }
    }
  }
}
</style>
